<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script> <!-- vue引入 -->
    <script>
        Vue.config.productionTip=false; //阻止vue在启动时产生提示
        const vm = new Vue({
            //el: "#root",
            data: {
                keyWord: '', //搜索使用
                sortAge: null, //根据年龄排序使用
                personArr: [ //遍历数组使用
                    {id:1, name:'周冬雨',age:18, sex: "女"},
                    {id:2, name:'马冬梅',age:23, sex: "女"},
                    {id:3, name:'周杰伦',age:28, sex: "男"},
                    {id:4, name:'温兆伦',age:20, sex: "男"}
                ],
                car: { //遍历对象使用
                    name: '奥迪A8',
                    price: '70万',
                    color: "黑色"
                },
                str: "hello" //遍历字符串
            },
            computed:{
                filPersonArr(){
                    console.log("计算属性执行");
                    const returnPersonArr = this.personArr.filter((p) =>{
                        return p.name.indexOf(this.keyWord) != -1;
                    });

                    if(this.sortAge != null) { //排序
                        returnPersonArr.sort((p1,p2)=>{
                            return this.sortAge == 1? (p1.age-p2.age): (p2.age-p1.age);
                        });
                    }

                    return returnPersonArr;
                }
            },
            methods: {
                dataUpdate(){

                    //this.personArr[0]['name'] = '周大福'; //方式1，修改单个属性

                    //方式2，修改整个数组里面的一个对象、会出现问题，页面不同步修改（但在vue3中已经解决），vue2的解决方式参考方式3或方式4
                    //this.personArr[0] = {id:11, name:'杨幂',age:18, sex: "女"}; 
                    
                    /* 方式3、采用vue重写数组后的数组操作、7种可以同步页面
                        arr.unshift('前追加元素');
                        arr.push('后追加元素');
                        arr.shift(); //获取数组中前面一个元素并删除
                        arr.pop(); //获取数组中最后一个元素并删除
                        arr.reverse(); //位置反转、后面的放前面、前面的放后面
                        arr.sort((a,b) => a - b); //排序
                        arr.splice(0,1,'a','b','c'); //删除并追加元素：参数1(开始下标位置) 参数2(删除数量), 往后参数(可以忽略)：在删除的位置上追加元素
                    */
                    //this.personArr.splice(0,1,{id:1, name:'杨幂',age:18, sex: "女"});  //从下标0开始、删除1个元素、并追加一个对象(也可以追加多个)
                    
                    //方式4、只针对指定下标替换
                    Vue.set(vm.personArr, 0, {id:1, name:'杨幂',age:18, sex: "女"}); //将数组下标0的替换

                    /*
                    //追加属性
                    //三个方式任选一种都可以、该方式不能直接给data填加，必须是data里面的对象才可以使用、如：vm._data.personArr[0]
                    //Vue.set(vm.personArr[1], 'hobby', '打球'); //动态给对象添加属性、方式1
                    //Vue.set(this.personArr[1], 'hobby', '打球'); //动态给对象添加属性、方式1.1
                    //this.$set(this.personArr[1], 'hobby', '打球'); //动态给对象添加属性、方式2 
                    */
                    
                }
            },
        });

        window.onload = function() { //页面加载完成在加载该方法
            vm.$mount('#root');
        }
        
    </script>
</head>
<body>

    <!-- 
        v-for指令
            1.用于展示列表数据
            2.语法：v-for="(item, index) in xxx" :key="yyy"
            3.可遍历：数组、对象、字符串(用的少)、指定次数(用的少)

            :key是每条数据的唯一值、一般都是后台指定的字段key，如果没有则vue会字段从0开始自动生产唯一值
                 使用idnex缺点、可能会出现顺序错乱现象、DOM对比效率也会下降，强烈推荐使用指定好的唯一字段作为key
     -->

    <div id="root">
        <input type="text" placeholder="请输入名字" v-model:value="keyWord"> 
        <button @click="sortAge = null">原顺序</button> 
        <button @click="sortAge = 1">年龄升序</button>
        <button @click="sortAge = 2">年龄降序</button>
        <button @click="dataUpdate">数据更新</button>
        <ul> <!-- 遍历数组(常用) -->
            <li v-for="(p,index) of filPersonArr" :key="p.id">
                {{p.name}} -- {{p.age}} -- {{p.sex}} -- {{p.hobby}}
            </li>
        </ul>
        <hr>

        <ul> <!-- 遍历对象(稍微常用) -->
            <li v-for="(value, k) of car" :key="k">
                {{k}} -- {{value}}
            </li>
        </ul>
        <hr>
        <ul> <!-- 遍历字符串(不常用) -->
            <li v-for="(char, index) of str" :key="index">
                {{char}} -- {{index}}
            </li>
        </ul>
        <hr>
        <ul> <!-- 遍历指定次数(不常用) -->
            <li v-for="(number, index) of 5" :key="index">
                {{index}} -- {{number}}
            </li>
        </ul>

    </div>
</body>
</html>